<template>
  <div class="personalTask">
    <div v-if="interfaceState === 1">
      <div class="commentCell" v-for="(item, index) in taskData" :key="item.job_id" @click.stop.prevent="goToTaskCircumstance(item, index)">
        <div class="cellTime">{{item.create_time}}</div>
        <div class="cellTitle">Day {{item.section_number}} {{item.section_name}}</div>
        <div class="cellAction">
          <div class="discussButton">
            <div class="discussIcon">
              <img src="http://mobuz-mp.cdn.bcebos.com/matter%2Fcomments%402x.png" lazy-load>
            </div>
            <div class="discussText">评论</div>
          </div>
          <div class="remarkButton" :class="item.teach? 'active': ''">{{item.teach? '已点评': '未点评'}}</div>
        </div>
        <div class="cellHint" v-if="item.teach_state === 1"></div>
      </div>
      <div class="commentLoading" v-if='!loading'>没有更多~</div>
    </div>
    <div v-if="interfaceState === 2" style="width: 100%; height: 100%;">
      <div class="commentImage">
        <img src="https://mobuz-mp.cdn.bcebos.com/matter/default_06@2x.png" lazy-load> 
      </div>
    </div>
  </div>
</template>

<script>
import {
  obtainPersonalTask
} from '@/config/api'
import {commentRegExp} from '@/config/mUtils'
import {NEWMODULEBATCHID} from '@/config/env'
export default {
  data () {
    return {
      // 当前页码数
      page: 1,
      // 学员id
      studentId: '',
      // 作业列表 数据
      taskData: [],
      // 是否加载更多
      loading: true,
      // 作业id
      taskId: '',
      // 作业下标
      taskIndex: null,
      // 界面状态 0 加载中  1 成功 有数据   2 成功没数据  3 失败  
      interfaceState: 0
    }
  },
  
  mounted () {
    let self = this
    // 初始化 我的作业 界面
    self.initPersonalTask();
  },
  methods: {
    // 初始化 我的作业 界面
    initPersonalTask() {
      let self = this;
      // 当前页码数
      self.page = 1
      // 获取 我的作业 数据
      self.acquirePersonalTaskData(true)
    },

    // 获取 我的作业 数据
    async acquirePersonalTaskData(init) {
      let self = this
      if (init) {
        // 当前页码数
        self.page = 1
        // 是否加载更多
        self.loading = true
      }
      // 界面状态 0 加载中  1 成功 有数据   2 成功没数据  3 失败  
      self.interfaceState = 0
      wx.showNavigationBarLoading()
      // 学员id
      self.studentId = await wx.getStorageSync('student_id')
      let taskInfo = await obtainPersonalTask(self.page, self.studentId)
      if (taskInfo.status === 200) {
        if (JSON.stringify(taskInfo.data) !== '[]') {
          if (taskInfo.data.length < 10 && self.page > 1) {
            // 是否加载更多
            self.loading = false
          }
          taskInfo.data.some((item, index) => {
            item.create_time = commentRegExp ((item.create_time-0))
          })
          if (init) {
            // 作业列表 数据
            self.taskData = taskInfo.data
          } else {
            // 下拉刷新，不能直接覆盖taskData 而是累加
            self.taskData = self.taskData.concat(taskInfo.data)
          }
        }
        console.log(self.taskData, '...self.taskData')

        // 判断是否有作业列表
        if (JSON.stringify(self.taskData) !== '[]') {
          // 界面状态 0 加载中  1 成功 有数据   2 成功没数据  3 失败  
          self.interfaceState = 1
        } else {
          // 界面状态 0 加载中  1 成功有数据   2 成功没数据  3 失败  
          self.interfaceState = 2
        }
      } else {
        // 界面状态 0 加载中  1 成功有数据   2 成功没数据  3 失败  
        self.interfaceState = 3
      }
      // console.log(taskInfo, '....精选作业')
      wx.hideNavigationBarLoading()
      wx.stopPullDownRefresh()
    },
    // 跳转到 作业详情 页
    goToTaskCircumstance(item, index) {
      let self = this;
      // 作业id
      self.taskId = item.job_id
      // 作业下标
      self.taskIndex = index
      if (self.taskId) {
        // let batch_id =  wx.getStorageSync('batch_id')
        // if (batch_id <= NEWMODULEBATCHID) {
        //    wx.navigateTo({
        //     url: '../taskParticulars/main?task_state=1&job_id='+self.taskId
        //   })
        // } else {
          wx.navigateTo({
            url: '../taskCircumstance/main?job_id='+self.taskId+'&status=1'
          })  
        // }
      }
    }  
  },

  // 下拉刷新
  onPullDownRefresh() {
    let self = this;
    console.log('下拉刷新')
    // 初始化 我的作业 界面
    self.initPersonalTask();
  },
  // 上拉加载
  onReachBottom() {
    let self = this;
    console.log('上拉加载')
    // 是否加载更多
    if (!self.loading) {
      // 没有更多了
      return false;
    } else {
      // 当前页码数
      self.page = self.page + 1
      // 获取 我的作业 数据
      self.acquirePersonalTaskData()
    }
  },
  // 页面展示
  onShow () {
    let self = this;
    const refreshTask = wx.getStorageSync('comment_success')
    if (refreshTask === 1) {
      // 清空 本地 重新加载
      wx.removeStorageSync('comment_success')
      if (self.taskData[self.taskIndex]['teach']) {
        // 作业列表 数据
        self.taskData[self.taskIndex]['teach_state'] =  2
      }
      
    }
    
  } 

}
</script>

<style>
page{
    width: 100%;
    height: 100%;
}
</style>
<style lang="less" scoped>
.personalTask{
  width: 100%;
  height: 100%;
  background: #ffffff;
  .commentCell{
    margin: 0 24rpx;
    padding: 20rpx 20rpx 11.5rpx 20rpx;
    border-bottom: 1rpx solid #EAEAEA;
    position: relative;
    &:last-child{
      border-bottom: none;
    }
    .cellTime{
      font-family: PingFangSC-Regular;
      font-size: 24rpx;
      color: #999999;
      letter-spacing: 0.48rpx;
      height: 33rpx;
      line-height: 33rpx;
      margin-bottom: 2rpx;
    }
    .cellTitle{
      font-family: PingFangSC-Regular;
      font-size: 32rpx;
      color: #333333;
      letter-spacing: 0.65rpx;
      height: 45rpx;
      line-height: 45rpx;
      margin-bottom: 4rpx;

      width: 95%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
    }
    .cellAction{
      line-height: 1;
      font-size: 0;
      .discussButton{
        display: inline-block;
        vertical-align: middle;
        margin-right: 20rpx;
        height: 30rpx;
        line-height: 30rpx;
        .discussIcon{
          display: inline-block;
          vertical-align: middle;
          width: 22.1rpx;
          height: 20.9rpx;
          line-height: 20.9rpx;
          img{
            width: 100%;
            height: 100%;
            display: block;
          }
        }
        .discussText{
          display: inline-block;
          vertical-align: middle;
          font-family: PingFangSC-Regular;
          font-size: 22rpx;
          color: #666666;
          letter-spacing: 0.67rpx;
          line-height: 1;
          margin-left: 9.1rpx;
        }
      }
      .remarkButton{
        display: inline-block;
        vertical-align: middle;
        height: 30rpx;
        line-height: 30rpx;
        font-family: PingFangSC-Regular;
        font-size: 22rpx;
        color: #666666;
        letter-spacing: 0.67rpx;
      }
      .active{
        color: #EE3A29;
      }
    }
    .cellHint{
      width: 10rpx;
      height: 10rpx;
      border-radius: 50%;
      position: absolute;
      top: 71.5rpx;
      left: 0rpx;
      background-image: linear-gradient(-90deg, #FFB497 0%, #FE7A72 100%);
    }
  }
  .commentLoading{
    width:100%;
    text-align:center;
    font-family:PingFangSC-Regular;
    font-size:26rpx;
    color:#999999;
    letter-spacing:0.7rpx;
    line-height:1;
    margin-top:-1rpx;
    padding-bottom:30rpx;
    padding-top: 13rpx;
    background-color: #fff;
  }
  .commentImage{
    width: 430rpx;
    height: 354rpx;
    margin: 0 auto;
    img{
      margin-top: 133.5rpx;
      width: 100%;
      height: 100%;
    }
  }
}
</style>
